<template>
  <view>
    <view class="status_bar"></view>
    <view class="content">
      <view class="tabs flex ju-be">
        <u-tabs
          :list="tabList"
          itemStyle="padding-left: 20px; padding-right: 20px;height:44px"
          lineColor="#000"
          :activeStyle="{ fontWeight: '500', fontSize: '42rpx', color: '#000' }"
          :inactiveStyle="{ color: '#999' }"
        ></u-tabs>
        <u--image
          :showLoading="true"
          src="/static/img/adduser.png"
          width="44rpx"
          height="44rpx"
        ></u--image>
      </view>
      <view class="navigation">
        <view class="navigation-item center">
          <view class="navigation-item-img">
            <u--image
              :showLoading="true"
              src="/static/img/fensi.png"
              width="106rpx"
              height="106rpx"
            ></u--image>
          </view>
          <view class="mt-4 f-24">粉丝</view>
        </view>
        <view class="navigation-item center">
          <view class="navigation-item-img">
            <u--image
              :showLoading="true"
              src="/static/img/dianzan.png"
              width="106rpx"
              height="106rpx"
            ></u--image>
          </view>
          <view class="mt-4 f-24">点赞</view>
        </view>
        <view class="navigation-item center">
          <view class="navigation-item-img">
            <u--image
              :showLoading="true"
              src="/static/img/dianzanme.png"
              width="106rpx"
              height="106rpx"
            ></u--image>
          </view>
          <view class="mt-4 f-24">评论</view>
        </view>
      </view>
    <view class="list">
        <navigator class="list-cell">
            <view class="list-cell-left">
                <u--image
                src="/static/img/zaixiankefu.png"
                width="90rpx"
                height="90rpx"
                ></u--image>
            </view>
            <view class="list-cell-right">
                <view class="list-cell-right-name">
                    <view>
                        <text>在线客服</text>
                        <text class="list-cell-right-guanFang">官方</text>
                    </view>
                    <text class="list-cell-right-time">11:58</text>
                </view>
                <view class="list-cell-right-desc ellipsis"> 有什么问题告诉我哦，马上就来帮助你哦有什么问题告诉我哦，马上就来帮助你哦</view>
            </view>
        </navigator>
        <navigator class="list-cell">
            <view class="list-cell-left">
                <u--image
                src="/static/img/gonggao.png"
                width="90rpx"
                height="90rpx"
                ></u--image>
            </view>
            <view class="list-cell-right">
                <view class="list-cell-right-name">
                    <view>
                        <text>官方公告</text>
                    </view>
                    <text class="list-cell-right-time">11:58</text>
                </view>
                <view class="list-cell-right-desc ellipsis"> 这是对话的最后一条信息，如果是语音，将显示有什么问题告诉我哦，马上就来帮助你哦</view>
            </view>
        </navigator>
        <navigator class="list-cell">
            <view class="list-cell-left">
                <u--image
                src="/static/img/fensi.png"
                width="90rpx"
                height="90rpx"
                ></u--image>
            </view>
            <view class="list-cell-right">
                <view class="list-cell-right-name">
                    <view>
                        <text>一只胖哒</text>
                    </view>
                    <text class="list-cell-right-time">11:58</text>
                </view>
                <view class="list-cell-right-desc ellipsis"> 这是对话的最后一条信息，如果是语音，将显有什么问题告诉我哦，马上就来帮助你哦</view>
            </view>
        </navigator>
    </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      tabList: [{ name: "通知" }],
    };
  },
};
</script>
<style lang="scss" scoped>
.tabs {
  padding: 0 32rpx;
  align-items: center;
}
.navigation {
  padding: 0 74rpx;
  padding-top: 46rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  color: #222222;margin-bottom:48rpx;
  &-item {
    flex-direction: column;
    &-img {
      width: 106rpx;
      height: 106rpx;
      border: 1px #e6e6e6 dashed;
    }
  }
}
.list{
    margin-left: 32rpx;
    &-cell{
        display: flex;
        padding: 26rpx 0;
        box-shadow: inset 0px -1px 0px 0px rgba(230,230,230,1);
        &-left{
            margin-right: 16rpx;
        }
        &-right{
            flex: 1;
            padding-right: 32rpx;
            &-name{
                font-size: 30rpx;color: #222222;
                display: flex; align-items: center;
                justify-content: space-between;
                font-family: PingFangSC-Regular, PingFang SC;
            }
            &-guanFang{
                background: #222222;font-size: 20rpx;
                border-radius: 15rpx;color: #fff;
                padding: 2rpx 8rpx;margin-left: 14rpx;
            }
            &-time{
                font-size: 22rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #AAAAAA;
            }
            &-desc{
                font-size: 24rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;margin-top: 12rpx;
                color: #999999;
                max-width: 580rpx;box-sizing: border-box;
            }
        }
    }

}
</style>
